<section id="companyFrameWork">
  <div class="clearfix">
    <div class="pull-left border-r left-tissue" style="width:238px;">
      <h4 class="line-height-45 font-14 text-center" style="background: rgba(239,239,239,1);color: rgb(165, 170, 183);">项目架构</h4>
      <div class="framework-wrap">
        <ul class="framework-tree-wrap">
          <item
            class="item"
            :key="index"
            @change="getPidData"
            :model="treeList">
          </item>
        </ul>
        <div class="slideTop"></div>
      </div>
      <div class="relative" v-if="show">
        <input type="text" v-model="name" class="framework-text cursor mr-10" />
        <span class="icon-Gm-confirm icon-color cursor mr-5" @click.stop.prevent="queryEditOrganization"></span>
        <span class="icon-Gm-cancel icon-color cursor" @click.stop.prevent="cancelEditOrganization"></span>
      </div>
      <button type="button" class="btn n-btn-primary mt-15" @click="show = !show" v-if="showButtonFlag">新建</button>
    </div>
    <div class="pull-right border-l right-tissue" style="width: 758px;">
      <h4 class="line-height-45 font-14 pl-24" style="background: rgba(239,239,239,1);color: rgb(165, 170, 183);">关联项目</h4>
      <div class="right-tissue-overflow">
        <ul class="border-r border-b">
          <li class="border-t line-height-45 clearfix hover-project" v-for="item in projectList">
            <span class="pl-12 pull-left">{{ item.projectName }}</span>
            <a target="_blank" :href="'#/projectConfigIndex?projectId='+ item.projectId " class="pull-right pr-12 hide">查看</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</section>
<script src="modules/user/scripts/treeframework.js" charset="utf-8"></script>
<script src="modules/user/scripts/company_framework.js" charset="utf-8"></script>

<style media="screen">
  .hover-project:hover {
    background:rgba(242,242,242,1);
  }
  .hover-project:hover a{
    display: block;
  }
  .icon-reg-90 {
    transform: rotate(90deg);
  }
  .framework-wrap {
    position: relative;
    z-index: 1;
  }
  .framework-tree-list {
    line-height: 45px;
    list-style-type: dot;
    padding-left: 12px;
  }
  .framework-tree-list .icon-color {
    color: #565E99;
  }

  .framework-title {
    line-height: 45px;
    height: 45px;
    position: relative;
    z-index: 1;
  }
  .framework-text {
    width:120px;
    height:37px;
    outline: medium;
    text-indent: 10px;
    background:rgba(255,255,255,1);
    box-shadow:0px 0px 4px 0px rgba(214,214,214,0.75) inset;
    border-radius:4px;
    border:1px solid #eee;
  }
  .handle-key {
    margin-right: 15px;
  }
  .slideTop {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 45px;
    background:rgba(247,247,247,1);
    z-index: 0;
    display: none;
  }
  .handle-button-wrap {
    position: absolute;
    right: 90px;
    top: 50%;
    transform: translate(0, -50%);
    z-index: 9;
    width: 115px;
    background:rgba(255,255,255,1);
    filter: drop-shadow(0px 0px 2px rgba(0,0,0,.1));
  }
  .handle-button-wrap .button-handle {
    height: 40px;
    line-height: 40px;
    text-align: center;
  }
  .handle-button-wrap::before {
    content: '';
    position: absolute;
    right: -20px;
    top: 50%;
    transform: translate(0, -50%);
    width: 20px;
    height: 20px;
    border-width: 10px;
    border-style: solid;
    border-color: transparent transparent transparent #fff;
  }
  .right-tissue {
    overflow: hidden;
  }
</style>
